<template>
    <div class="row-box">
        <el-table :data="data">
            <el-table-column prop="name" label="名称">
                <template slot-scope="scope">
                    <div style="display: flex;align-items: center;">
                        <div class="row-img">
                            <el-image style="width: 100%;height: 100%;" :src="folderImg"></el-image>
                            <!-- <el-image v-if="scope.row.type == 'doc'" style="width: 100%;height: 100%;" :src="fileImg"></el-image> -->
                        </div>
                        <span @click="documentClick(scope.row)" class="document-title">{{scope.row.name}}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="220">
            </el-table-column>
            <el-table-column prop="createBy" label="创建者" width="130">
            </el-table-column>
            <!-- <el-table-column label="类型" width="130">
				<template slot-scope="scope">
					<span>{{scope.row.type | dirType}}</span>
				</template>
			</el-table-column> -->
            <el-table-column prop="creator" fixed="right" label="操作" width="60">
                <template slot-scope="scope">
                    <folderPopover v-if="listQuery.isUpdate != 1" :functionIndex="functionIndex" :listQuery="listQuery" :treeData="scope.row" :documentType="documentType"></folderPopover>
                    <span v-if="listQuery.isUpdate == 1 || scope.row.type == 'dir'">-</span>
                </template>
            </el-table-column>
        </el-table>
    </div>

</template>

<script>
import folderPopover from "./folderPopover.vue";
export default {
    data() {
        return {
            folderImg:
                require("../../../../img/8eacfb1a6bafde0a172c6b393950dab8.svg"),
            fileImg:
                require("../../../../img/140a48decfb0a656a23a22e2cbb6bee8.svg"),
           componentsTypes:''
        };
    },
    components: {
        folderPopover,
    },
    props: ["data", "listQuery", "functionIndex", "documentType",'componentsType'],
    watch:{
      componentsType: {
        handler(val, oldval) {
          if(val){
            console.log(val)
            this.componentsTypes = val
          }else {
            this.componentsTypes = ''
          }
        },
        // 深度观察监听
        deep: true,
        immediate:true
      }
    },
    filters: {
        docType(data) {
            if (data == "00") {
                return "项目附件";
            } else if (data == "01") {
                return "任务附件";
            } else if (data == "02") {
                return "产品文档";
            } else if (data == "04") {
                return "企业文档";
            } else if (data == "05") {
                return "合同文档";
            } else if (data == "06") {
                return "知识库";
            }
        },
        dirType(data) {
            if (data == "dir") {
                return "文件夹";
            } else if (data == "doc") {
                return "文件";
            }
        },
    },
    methods: {
        documentClick(item) {
            var _this = this;
            if (item.type == "dir") {
                this.$emit("dirClick", item);
                // window.open(item.filePath, '_system') //url为访问的地址
            } else {
                //   window.open('https://view.officeapps.live.com/op/view.aspx?src=' + item.filePath)
              console.log(this.componentsTypes)
			 var data = {  docType: item.docType,  dirId: item.dirId, docId: item.docId,componentsType:this.componentsTypes};
                this.$router.push({
                    path: "/produce/docDetails",
                    query: {
                        data: JSON.stringify(data),
                    },
                });
            }
        },
    },
};
</script>

<style scoped>
.row-box {
    width: 100%;
    background-color: firebrick;
    position: relative;
}
.row-img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}
/deep/.el-table__fixed-right::before {
    z-index: 3 !important;
}

.document-title {
    cursor: pointer;
}

.document-title:hover {
    color: #2c7ef8;
}
</style>
